<template>
    <div v-show="show" style="margin-top: 40px;">
        线路：
        <Select style="width:200px" v-model="serialIdx" @on-change="onSelectChanged">
            
            <Option :value="-1" :key="-1" label="未分配"></Option>

            <Option v-for="serial, idx in lstSerials" :value="idx" :key="idx" :label="serial.title" :class="isEmpty(serial)?'empty':'notempty'">
                <span>{{serial.title}}</span> 
                <span style="float: right">{{ currentStudName(serial) }}</span>
            </Option>
        </Select>
    </div>
</template>

<style scoped>
.notempty {
    color: #999
}
</style>

<script lang="ts">
// doc: https://github.com/kaorun343/vue-property-decorator
import { Component, Provide, Prop, Watch, Vue } from 'vue-property-decorator';
import { AllSerialUsages, Stud } from '../../../../store/Stud';
import { Cable } from '../../../../store/conn/Cable';
import { PartHost } from '../../../../store/parts/PartBase';

@Component({components:{  }})
export default class Serial extends Vue {

    @Prop(Stud) target: Stud

    lstSerials: Cable[] = []

    serialIdx: number = -1

    get show(): boolean {
        this.loadMenu()
        return (this.target.part instanceof PartHost) && AllSerialUsages.includes(this.target.usage)
    }


    isEmpty(serial: Cable): boolean {
        return !serial.hostStud(this.target.usage)
    }

    currentStudName(serial: Cable){
        let stud = serial.hostStud(this.target.usage)
        return stud? ('当前:'+stud.info.name): "空缺"
    }

    loadMenu() {
        if( !(this.target.part instanceof PartHost) ) {
            this.lstSerials.splice(0, this.lstSerials.length)
            return
        }
        this.lstSerials = this.target.part.allSerialsWithUsage( this.target.usage ) || []

        this.serialIdx = this.serialIdxForTarget()
    }

    serialIdxForTarget() {
        // for(let s=0; s<this.lstSerials.length; s++) {
        //     if( this.lstSerials[s] == this.target.serial ) {
        //         return s
        //     }
        // }
        return -1
    }

    onSelectChanged(idx:number) {
        let serial = this.lstSerials[idx]
        let usage = this.target.usage
        let stud = this.target

        if(idx==-1) {
            // 取消分配
            // if( this.target.serial ) {
            //     this.target.serial.setHostStud(this.target.usage, undefined)
            // }
            return
        }

        if(!serial) {
            return 
        }

        // 没有改变
        if( serial.hostStud(usage) == stud ){
            return 
        }


        // 分配到一个空的接口上
        if(this.isEmpty(serial)) {
            serial.setHostStud(usage, stud)
            this.serialIdx = idx
        }

        // 替换原有接口
        else {
            ; (this as any).$Modal.confirm({
                title: `确定要将串口线路${serial.title}的${usage}替换为当前接口(${stud.info.name})吗？` ,
                onOk: ()=>{
                    serial.setHostStud(usage, stud)
                    this.serialIdx = idx
                } ,
                onCancel: () => {
                    this.serialIdx = this.serialIdxForTarget()
                }
            })
        }
    }

    mounted () {
        
    }
}
</script>